<template>
  <div id="under2">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div id="under_2_1" style="width:454px;height:280px"></div>
      </swiper-slide>
      <!-- <swiper-slide>
        <div id="under_2_2" style="width:454px;height:280px"></div>
      </swiper-slide> -->
    </swiper>
  </div>
</template>
<script>
import echarts from "echarts";

import { total } from "@/api/api.js";
export default {
  data() {
    return {
      swiperOptions:{
         autoplay:true, 
      },
      content: null
    };
  },
  mounted() {
    this.totalFn();
  },
  methods: { 
    async totalFn() {
      var params = {
        id: 1
      };
      var data = await total(params);
      console.log(data.data.content);
      try {
        if (data.data.code == 200) {
          this.content = data.data.content;
          this.renderFn();
        }
      } catch (e) {
        console.log(e);
      }
    },
    renderFn() {
      var myChart1 = echarts.init(document.getElementById("under_2_1"));
      var option1 =  {
        backgroundColor: "#000",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ["#4682B4", "#B0C4DE", "#7FFFD4"],
        legend: {
          data: ["人类", "机器人","无法识别"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#FFF"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: this.content.humanCount, name: "人类" },
              { value: this.content.robotCount, name: "机器人" },
              { value: this.content.failCount, name: "无法识别" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
               
              }
            }
          }
        ]
      };
      myChart1.setOption(option1);
      // var myChart2 = echarts.init(document.getElementById("under_2_2"));
      // var option2 = {
      //   title: {
      //     text: "今日&昨日",
      //     left: "50%",
      //     textAlign: "center"
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       lineStyle: {
      //         color: "#ddd"
      //       }
      //     },
      //     backgroundColor: "rgba(255,255,255,1)",
      //     padding: [5, 10],
      //     textStyle: {
      //       color: "#7588E4"
      //     },
      //     extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
      //   },
      //   legend: {
      //     right: 20,
      //     orient: "vertical",
      //     data: ["今日", "昨日"]
      //   },
      //   xAxis: {
      //     type: "category",
      //     data: [
      //       "00:00",
      //       "2:00",
      //       "4:00",
      //       "6:00",
      //       "8:00",
      //       "10:00",
      //       "12:00",
      //       "14:00",
      //       "16:00",
      //       "18:00",
      //       "20:00",
      //       "22:00"
      //     ],
      //     boundaryGap: false,
      //     splitLine: {
      //       show: true,
      //       interval: "auto",
      //       lineStyle: {
      //         color: ["#D4DFF5"]
      //       }
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       lineStyle: {
      //         color: "#609ee9"
      //       }
      //     },
      //     axisLabel: {
      //       margin: 10,
      //       textStyle: {
      //         fontSize: 14
      //       }
      //     }
      //   },
      //   yAxis: {
      //     type: "value",
      //     splitLine: {
      //       lineStyle: {
      //         color: ["#D4DFF5"]
      //       }
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       lineStyle: {
      //         color: "#609ee9"
      //       }
      //     },
      //     axisLabel: {
      //       margin: 10,
      //       textStyle: {
      //         fontSize: 14
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       name: "今日",
      //       type: "line",
      //       smooth: true,
      //       showSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       data: [
      //         "1200",
      //         "1400",
      //         "1008",
      //         "1411",
      //         "1026",
      //         "1288",
      //         "1300",
      //         "800",
      //         "1100",
      //         "1000",
      //         "1118",
      //         "1322"
      //       ],
      //       areaStyle: {
      //         normal: {
      //           color: new echarts.graphic.LinearGradient(
      //             0,
      //             0,
      //             0,
      //             1,
      //             [
      //               {
      //                 offset: 0,
      //                 color: "rgba(199, 237, 250,0.5)"
      //               },
      //               {
      //                 offset: 1,
      //                 color: "rgba(199, 237, 250,0.2)"
      //               }
      //             ],
      //             false
      //           )
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "#f7b851"
      //         }
      //       },
      //       lineStyle: {
      //         normal: {
      //           width: 3
      //         }
      //       }
      //     },
      //     {
      //       name: "昨日",
      //       type: "line",
      //       smooth: true,
      //       showSymbol: false,
      //       symbol: "circle",
      //       symbolSize: 6,
      //       data: [
      //         "1200",
      //         "1400",
      //         "808",
      //         "811",
      //         "626",
      //         "488",
      //         "1600",
      //         "1100",
      //         "500",
      //         "300",
      //         "1998",
      //         "822"
      //       ],
      //       areaStyle: {
      //         normal: {
      //           color: new echarts.graphic.LinearGradient(
      //             0,
      //             0,
      //             0,
      //             1,
      //             [
      //               {
      //                 offset: 0,
      //                 color: "rgba(216, 244, 247,1)"
      //               },
      //               {
      //                 offset: 1,
      //                 color: "rgba(216, 244, 247,1)"
      //               }
      //             ],
      //             false
      //           )
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "#58c8da"
      //         }
      //       },
      //       lineStyle: {
      //         normal: {
      //           width: 3
      //         }
      //       }
      //     }
      //   ]
      // };
      // myChart2.setOption(option2);
    }
  }
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 306px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #2e374480;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #f4f9ff18;
}
.el-carousel__container{
  height: 100%;
}
</style>
<style>
.under2 .el-carousel {
  height: 100%;
}
.under2 .el-carousel__container {
  height: calc(100% - 50px);
}

</style>